` ఎలిమెంట్లను ఉపయోగించడం.

సరియైనది:

<table>
  <caption>అక్టోబర్ 2024 కోసం క్యాలెండర్</caption>
  <thead>
    <tr>
      <th scope="col">ఆది</th>
      <th scope="col">సోమ</th>
      <th scope="col">మంగళ</th>
      <th scope="col">బుధ</th>
      <th scope="col">గురు</th>
      <th scope="col">శుక్ర</th>
      <th scope="col">శని</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>29</td>
      <td>30</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <!-- మరిన్ని అడ్డువరుసలు -->
  </tbody>
</table>

2. ARIA లక్షణాలు

ARIA (యాక్సెసిబుల్ రిచ్ ఇంటర్నెట్ అప్లికేషన్స్) లక్షణాలు సహాయక సాంకేతికతలకు అదనపు అర్థవంతమైన సమాచారాన్ని అందిస్తాయి, ఇంటరాక్టివ్ ఎలిమెంట్లపై వాటి అవగాహనను పెంచుతాయి. ARIA లక్షణాలను దీనికోసం ఉపయోగించండి:

• పాత్రలను నిర్వచించడం: క్యాలెండర్ గ్రిడ్ కోసం `role="grid"` మరియు ప్రతి తేదీ సెల్ కోసం `role="gridcell"` వంటి ఎలిమెంట్ల ప్రయోజనాన్ని సూచించండి.
• లేబుల్‌లను అందించడం: ఎలిమెంట్ల కోసం వివరణాత్మక లేబుల్‌లను అందించడానికి `aria-label` లేదా `aria-labelledby` ఉపయోగించండి, ముఖ్యంగా దృశ్యమాన లేబుల్ సరిపోనప్పుడు.
• స్థితిని సూచించడం: ఎంచుకున్న తేదీని సూచించడానికి `aria-selected` మరియు నిలిపివేయబడిన తేదీలను సూచించడానికి `aria-disabled` వంటి లక్షణాలను ఉపయోగించండి.
• వివరణలు అందించడం: తేదీ ఫార్మాట్ యొక్క వివరణ వంటి అదనపు సమాచారాన్ని ఒక ఎలిమెంట్‌తో అనుబంధించడానికి `aria-describedby` ఉపయోగించండి.

ఉదాహరణ:

<table role="grid" aria-labelledby="date-picker-label">
  <caption id="date-picker-label">ఒక తేదీని ఎంచుకోండి</caption>
  <thead>
    <tr>
      <th scope="col">ఆది</th>
      <th scope="col">సోమ</th>
      <th scope="col">మంగళ</th>
      <th scope="col">బుధ</th>
      <th scope="col">గురు</th>
      <th scope="col">శుక్ర</th>
      <th scope="col">శని</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td role="gridcell" aria-disabled="true">29</td>
      <td role="gridcell" aria-disabled="true">30</td>
      <td role="gridcell"><button aria-label="అక్టోబర్ 1, 2024">1</button></td>
      <td role="gridcell"><button aria-label="అక్టోబర్ 2, 2024">2</button></td>
      <td role="gridcell"><button aria-label="అక్టోబర్ 3, 2024">3</button></td>
      <td role="gridcell"><button aria-label="అక్టోబర్ 4, 2024">4</button></td>
      <td role="gridcell"><button aria-label="అక్టోబర్ 5, 2024">5</button></td>
    </tr>
    <tr>
      <td role="gridcell"><button aria-label="అక్టోబర్ 6, 2024">6</button></td>
      <td role="gridcell"><button aria-label="అక్టోబర్ 7, 2024">7</button></td>
      <td role="gridcell"><button aria-label="అక్టోబర్ 8, 2024">8</button></td>
      <td role="gridcell"><button aria-label="అక్టోబర్ 9, 2024">9</button></td>
      <td role="gridcell"><button aria-label="అక్టోబర్ 10, 2024">10</button></td>
      <td role="gridcell"><button aria-label="అక్టోబర్ 11, 2024">11</button></td>
      <td role="gridcell"><button aria-label="అక్టోబర్ 12, 2024">12</button></td>
    </tr>
    <!-- మరిన్ని అడ్డువరుసలు -->
  </tbody>
</table>

గమనిక: ARIA లక్షణాలు సరిగ్గా అన్వయించబడ్డాయో లేదో నిర్ధారించుకోవడానికి ఎల్లప్పుడూ నిజమైన స్క్రీన్ రీడర్‌లతో పరీక్షించండి.

3. కీబోర్డ్ నావిగేషన్

మౌస్ లేదా ఇతర పాయింటింగ్ పరికరాన్ని ఉపయోగించలేని వినియోగదారులకు కీబోర్డ్ నావిగేషన్ అవసరం. తేదీ పికర్‌లోని అన్ని ఇంటరాక్టివ్ ఎలిమెంట్‌లు కీబోర్డ్ ద్వారా యాక్సెస్ చేయగలవని నిర్ధారించుకోండి.

• ఫోకస్ మేనేజ్‌మెంట్: ఫోకస్ క్రమాన్ని నియంత్రించడానికి `tabindex` లక్షణాన్ని ఉపయోగించండి. ఫోకస్ తేదీ పికర్ ద్వారా తార్కికంగా కదులుతుందని నిర్ధారించుకోండి. వినియోగదారు విడ్జెట్‌తో ఇంటరాక్ట్ అయినప్పుడు ఫోకస్‌ను నిర్వహించడానికి జావాస్క్రిప్ట్ ఉపయోగించండి.
• ఆరో కీలు: తేదీల మధ్య మారడానికి ఆరో కీలను ఉపయోగించి కీబోర్డ్ నావిగేషన్‌ను అమలు చేయండి. ఎడమ మరియు కుడి ఆరో కీలు వరుసగా మునుపటి మరియు తదుపరి రోజులకు మారాలి. పైకి మరియు క్రిందికి ఆరో కీలు వరుసగా మునుపటి మరియు తదుపరి వారంలోని అదే రోజుకు మారాలి.
• హోమ్ మరియు ఎండ్ కీలు: హోమ్ కీ ప్రస్తుత వారం మొదటి రోజుకు, మరియు ఎండ్ కీ ప్రస్తుత వారం చివరి రోజుకు మారాలి.
• పేజ్ అప్ మరియు పేజ్ డౌన్ కీలు: పేజ్ అప్ కీ మునుపటి నెలకు, మరియు పేజ్ డౌన్ కీ తదుపరి నెలకు మారాలి.
• ఎంటర్ కీ: ఎంటర్ కీ ఫోకస్ చేయబడిన తేదీని ఎంచుకోవాలి.
• ఎస్కేప్ కీ: ఎస్కేప్ కీ తేదీ పికర్‌ను మూసివేసి, దానిని ట్రిగ్గర్ చేసిన ఇన్‌పుట్ ఫీల్డ్ లేదా బటన్‌కు ఫోకస్‌ను తిరిగి ఇవ్వాలి.

ఉదాహరణ (జావాస్క్రిప్ట్):

// కీబోర్డ్ నావిగేషన్‌ను నిర్వహించే ఉదాహరణ
const datePicker = document.getElementById('date-picker');

datePicker.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowLeft':
      // ఫోకస్‌ను మునుపటి రోజుకు తరలించండి
      break;
    case 'ArrowRight':
      // ఫోకస్‌ను తదుపరి రోజుకు తరలించండి
      break;
    case 'ArrowUp':
      // ఫోకస్‌ను మునుపటి వారంలోని అదే రోజుకు తరలించండి
      break;
    case 'ArrowDown':
      // ఫోకస్‌ను తదుపరి వారంలోని అదే రోజుకు తరలించండి
      break;
    case 'Enter':
      // ఫోకస్ చేయబడిన తేదీని ఎంచుకోండి
      break;
    case 'Escape':
      // తేదీ పికర్‌ను మూసివేయండి
      break;
  }
});

4. స్క్రీన్ రీడర్ అనుకూలత

స్క్రీన్ రీడర్‌లు వినియోగదారులకు సమాచారాన్ని అందించడానికి సెమాంటిక్ HTML మరియు ARIA లక్షణాలపై ఆధారపడతాయి. మీ తేదీ పికర్ NVDA, JAWS, మరియు VoiceOver వంటి ప్రముఖ స్క్రీన్ రీడర్‌లతో అనుకూలంగా ఉందని నిర్ధారించుకోండి.

• వివరణాత్మక లేబుల్‌లు: అన్ని ఇంటరాక్టివ్ ఎలిమెంట్‌లకు స్పష్టమైన మరియు సంక్షిప్త లేబుల్‌లను అందించండి. అదనపు సందర్భాన్ని అందించడానికి `aria-label` లేదా `aria-labelledby` ఉపయోగించండి.
• స్థితి ప్రకటనలు: ఎంచుకున్న తేదీకి `aria-selected` మరియు నిలిపివేయబడిన తేదీలకు `aria-disabled` వంటి ఎలిమెంట్ల స్థితిని సూచించడానికి ARIA లక్షణాలను ఉపయోగించండి. స్క్రీన్ రీడర్‌లు ఈ స్థితులను వినియోగదారునికి ప్రకటిస్తాయి.
• లైవ్ రీజియన్లు: వినియోగదారు వేరొక నెలకు నావిగేట్ చేసినప్పుడు వంటి, తేదీ పికర్‌కు డైనమిక్ మార్పులను ప్రకటించడానికి ARIA లైవ్ రీజియన్లను (ఉదా., `aria-live="polite"`) ఉపయోగించండి. ఇది స్క్రీన్ రీడర్‌లు వారి వర్క్‌ఫ్లోకు అంతరాయం కలిగించకుండా మార్పు గురించి వినియోగదారునికి తెలియజేయడానికి అనుమతిస్తుంది.
• ఎర్రర్ హ్యాండ్లింగ్: ఏవైనా లోపాలు లేదా ధ్రువీకరణ సమస్యలు ఉంటే, స్క్రీన్ రీడర్‌లకు యాక్సెస్ చేయగల స్పష్టమైన మరియు సమాచార లోప సందేశాలను అందించండి. లోప సందేశాన్ని సంబంధిత ఇన్‌పుట్ ఫీల్డ్‌తో అనుబంధించడానికి `aria-describedby` ఉపయోగించండి.

ఉదాహరణ:

<div aria-live="polite">
  <!-- డైనమిక్ కంటెంట్, నెల నావిగేషన్ వంటివి -->
</div>

5. విజువల్ డిజైన్

తేదీ పికర్ యొక్క విజువల్ డిజైన్ కూడా యాక్సెస్ చేయగలదిగా ఉండాలి. ఈ క్రింది వాటిని పరిగణించండి:

• రంగు వ్యత్యాసం: WCAG (వెబ్ కంటెంట్ యాక్సెసిబిలిటీ గైడ్‌లైన్స్) 2.1 లెవల్ AA ప్రమాణాలకు అనుగుణంగా టెక్స్ట్ మరియు నేపథ్య రంగుల మధ్య తగినంత రంగు వ్యత్యాసం ఉందని నిర్ధారించుకోండి. కాంట్రాస్ట్ రేషియోను ధ్రువీకరించడానికి కలర్ కాంట్రాస్ట్ చెకర్ సాధనాన్ని ఉపయోగించండి.
• ఫోకస్ ఇండికేటర్లు: అన్ని ఇంటరాక్టివ్ ఎలిమెంట్‌లకు స్పష్టమైన మరియు కనిపించే ఫోకస్ ఇండికేటర్‌ను అందించండి. ఫోకస్ ఇండికేటర్ చుట్టుపక్కల ఎలిమెంట్ల నుండి విభిన్నంగా ఉండాలి మరియు ఇతర ఎలిమెంట్ల ద్వారా అస్పష్టంగా ఉండకూడదు.
• ఫాంట్ పరిమాణం మరియు అంతరం: చదవడానికి మరియు ఉపయోగించడానికి అనువుగా ఉండేలా స్పష్టమైన ఫాంట్ పరిమాణం మరియు ఎలిమెంట్ల మధ్య తగినంత అంతరం ఉపయోగించండి.
• కేవలం రంగుపై ఆధారపడటం మానుకోండి: సమాచారాన్ని తెలియజేయడానికి కేవలం రంగుపై ఆధారపడవద్దు. రంగు కోడింగ్‌ను పూర్తి చేయడానికి ఐకాన్‌లు లేదా టెక్స్ట్ వంటి ఇతర దృశ్యమాన సూచనలను ఉపయోగించండి.

6. స్థానికీకరణ మరియు అంతర్జాతీయీకరణ

తేదీ ఫార్మాట్‌లు, క్యాలెండర్ సిస్టమ్‌లు, మరియు భాషా సంప్రదాయాలు వివిధ సంస్కృతులు మరియు ప్రాంతాలలో విభిన్నంగా ఉంటాయి. ప్రపంచ ప్రేక్షకులకు మద్దతు ఇవ్వడానికి మీ తేదీ పికర్ సరిగ్గా స్థానికీకరించబడి మరియు అంతర్జాతీయీకరించబడిందని నిర్ధారించుకోండి.

• తేదీ ఫార్మాట్‌లు: DD/MM/YYYY (యూరప్ మరియు ఆసియాలోని కొన్ని ప్రాంతాలలో సాధారణం) మరియు MM/DD/YYYY (ఉత్తర అమెరికాలో సాధారణం) వంటి విభిన్న తేదీ ఫార్మాట్‌లకు మద్దతు ఇచ్చే ఫ్లెక్సిబుల్ డేట్ ఫార్మాటింగ్ లైబ్రరీని ఉపయోగించండి. వినియోగదారులు వారి ప్రాధాన్యతలకు అనుగుణంగా తేదీ ఫార్మాట్‌ను అనుకూలీకరించడానికి అనుమతించండి.
• క్యాలెండర్ సిస్టమ్‌లు: గ్రెగోరియన్ క్యాలెండర్ (అత్యంత విస్తృతంగా ఉపయోగించే క్యాలెండర్) మరియు హిజ్రీ క్యాలెండర్ (అనేక ఇస్లామిక్ దేశాలలో ఉపయోగించబడుతుంది) వంటి విభిన్న క్యాలెండర్ సిస్టమ్‌లకు మద్దతు ఇవ్వండి.
• భాషా మద్దతు: నెల పేర్లు, రోజు పేర్లు, మరియు లేబుల్‌లతో సహా తేదీ పికర్‌లోని అన్ని టెక్స్ట్ ఎలిమెంట్‌లకు అనువాదాలను అందించండి.
• కుడి నుండి ఎడమకు (RTL) మద్దతు: అరబిక్ మరియు హిబ్రూ వంటి RTL భాషలలో తేదీ పికర్ సరిగ్గా ప్రదర్శించబడుతుందని నిర్ధారించుకోండి. దీనికి విడ్జెట్ యొక్క లేఅవుట్ మరియు స్టైలింగ్‌ను సర్దుబాటు చేయాల్సి రావచ్చు.
• టైమ్ జోన్‌లు: తేదీలను హ్యాండిల్ చేసేటప్పుడు టైమ్ జోన్‌ల యొక్క చిక్కులను పరిగణించండి. తేదీలను స్థిరమైన టైమ్ జోన్‌లో (ఉదా., UTC) నిల్వ చేసి, వాటిని ప్రదర్శించేటప్పుడు వినియోగదారు యొక్క స్థానిక టైమ్ జోన్‌కు మార్చండి.

ఉదాహరణ: తేదీ ఫార్మాటింగ్ మరియు స్థానికీకరణను నిర్వహించడానికి `moment.js` లేదా `date-fns` వంటి జావాస్క్రిప్ట్ లైబ్రరీని ఉపయోగించండి.

7. మొబైల్ యాక్సెసిబిలిటీ

మొబైల్ పరికరాల వాడకం పెరుగుతున్నందున, మీ తేదీ పికర్ మొబైల్ ప్లాట్‌ఫారమ్‌లలో యాక్సెస్ చేయగలదని నిర్ధారించుకోవడం చాలా అవసరం. ఈ క్రింది వాటిని పరిగణించండి:

• టచ్ టార్గెట్‌లు: అన్ని ఇంటరాక్టివ్ ఎలిమెంట్‌లు మొబైల్ పరికరాలలో సులభంగా నొక్కడానికి తగినంత పెద్ద టచ్ టార్గెట్‌లను కలిగి ఉన్నాయని నిర్ధారించుకోండి. ఆపిల్ కనీసం 44x44 పిక్సెల్‌ల టచ్ టార్గెట్ పరిమాణాన్ని సిఫార్సు చేస్తుంది.
• రెస్పాన్సివ్ డిజైన్: తేదీ పికర్ విభిన్న స్క్రీన్ పరిమాణాలు మరియు ఓరియంటేషన్‌లకు అనుగుణంగా ఉండేలా రెస్పాన్సివ్ డిజైన్ టెక్నిక్‌లను ఉపయోగించండి.
• కీబోర్డ్ ఇన్‌పుట్: తేదీ పికర్‌కు కీబోర్డ్ ఇన్‌పుట్ అవసరమైతే, తేదీ నమోదుకు అనుకూలంగా ఉండే మొబైల్-ఫ్రెండ్లీ కీబోర్డ్‌ను అందించండి.
• సంజ్ఞలు: మోటార్ వైకల్యాలున్న వినియోగదారులకు కష్టంగా ఉండే సంజ్ఞలపై మాత్రమే ఆధారపడటం మానుకోండి. కీబోర్డ్ నావిగేషన్ లేదా వాయిస్ కంట్రోల్ వంటి ప్రత్యామ్నాయ ఇన్‌పుట్ పద్ధతులను అందించండి.

పరీక్ష మరియు ధ్రువీకరణ

మీ తేదీ పికర్ యొక్క యాక్సెసిబిలిటీని నిర్ధారించడానికి సమగ్రమైన పరీక్ష చాలా ముఖ్యం. ఆటోమేటెడ్ మరియు మాన్యువల్ టెస్టింగ్ పద్ధతుల కలయికను ఉపయోగించండి:

• ఆటోమేటెడ్ టెస్టింగ్: సాధారణ యాక్సెసిబిలిటీ సమస్యలను గుర్తించడానికి Axe లేదా WAVE వంటి యాక్సెసిబిలిటీ టెస్టింగ్ సాధనాలను ఉపయోగించండి.
• మాన్యువల్ టెస్టింగ్: వైకల్యాలున్న వ్యక్తులు ఉపయోగించగలరని ధ్రువీకరించడానికి స్క్రీన్ రీడర్ మరియు కీబోర్డ్ నావిగేషన్‌ను ఉపయోగించి తేదీ పికర్‌ను మాన్యువల్‌గా పరీక్షించండి.
• యూజర్ టెస్టింగ్: ఫీడ్‌బ్యాక్ సేకరించడానికి మరియు మెరుగుదల కోసం ప్రాంతాలను గుర్తించడానికి వైకల్యాలున్న వ్యక్తులతో యూజర్ టెస్టింగ్ నిర్వహించండి.
• WCAG వర్తింపు: మీ తేదీ పికర్ WCAG 2.1 లెవల్ AA యొక్క అవసరాలకు అనుగుణంగా ఉందని నిర్ధారించుకోండి.

యాక్సెస్ చేయగల తేదీ పికర్‌ల ఉదాహరణలు

అనేక ఓపెన్-సోర్స్ మరియు వాణిజ్య తేదీ పికర్ లైబ్రరీలు మంచి యాక్సెసిబిలిటీ మద్దతును అందిస్తాయి. కొన్ని ఉదాహరణలు:

• రియాక్ట్ డేట్‌పికర్: ARIA మద్దతు మరియు కీబోర్డ్ నావిగేషన్‌తో ఒక ప్రముఖ రియాక్ట్ కాంపోనెంట్.
• ఎయిర్ డేట్‌పికర్: మంచి యాక్సెసిబిలిటీ ఫీచర్లతో తేలికైన మరియు అనుకూలీకరించదగిన తేదీ పికర్.
• ఫుల్‌క్యాలెండర్: సమగ్ర యాక్సెసిబిలిటీ మద్దతుతో ఒక పూర్తి-ఫీచర్డ్ క్యాలెండర్ కాంపోనెంట్.

తేదీ పికర్ లైబ్రరీని ఎంచుకునేటప్పుడు, దాని యాక్సెసిబిలిటీ ఫీచర్‌లను జాగ్రత్తగా అంచనా వేయండి మరియు అది మీ నిర్దిష్ట అవసరాలకు అనుగుణంగా ఉందని నిర్ధారించుకోండి.

యాక్సెస్ చేయగల తేదీ పికర్‌లను నిర్మించడానికి ఉత్తమ పద్ధతులు

యాక్సెస్ చేయగల తేదీ పికర్‌లను నిర్మించడానికి ఉత్తమ పద్ధతుల సారాంశం ఇక్కడ ఉంది:

• తేదీ పికర్‌ను రూపొందించడానికి సెమాంటిక్ HTML ఉపయోగించండి.
• అదనపు సెమాంటిక్ సమాచారం అందించడానికి ARIA లక్షణాలను ఉపయోగించండి.
• కీబోర్డ్ నావిగేషన్ పూర్తిగా అమలు చేయబడిందని నిర్ధారించుకోండి.
• అనుకూలతను ధ్రువీకరించడానికి స్క్రీన్ రీడర్‌లతో పరీక్షించండి.
• తగినంత రంగు వ్యత్యాసం మరియు స్పష్టమైన ఫోకస్ ఇండికేటర్లను అందించండి.
• ప్రపంచ వినియోగదారుల కోసం తేదీ పికర్‌ను స్థానికీకరించండి మరియు అంతర్జాతీయీకరించండి.
• మొబైల్ పరికరాల కోసం తేదీ పికర్‌ను ఆప్టిమైజ్ చేయండి.
• సమగ్రమైన పరీక్ష మరియు ధ్రువీకరణను నిర్వహించండి.

ముగింపు

యాక్సెస్ చేయగల తేదీ పికర్‌లను నిర్మించడం సంక్లిష్టమైన కానీ అవసరమైన పని. ఈ గైడ్‌లో పేర్కొన్న మార్గదర్శకాలు మరియు ఉత్తమ పద్ధతులను అనుసరించడం ద్వారా, మీరు విభిన్న సాంస్కృతిక మరియు సాంకేతిక నేపథ్యాలలో అన్ని సామర్థ్యాలు గల వినియోగదారులను తీర్చగల సమ్మిళిత క్యాలెండర్ విడ్జెట్‌లను రూపొందించవచ్చు. యాక్సెసిబిలిటీ అనేది ఒక నిరంతర ప్రక్రియ అని గుర్తుంచుకోండి, మరియు మీ తేదీ పికర్‌లు కాలక్రమేణా యాక్సెస్ చేయగలవని నిర్ధారించుకోవడానికి నిరంతర పరీక్ష మరియు మెరుగుదల చాలా ముఖ్యం. యాక్సెసిబిలిటీకి ప్రాధాన్యత ఇవ్వడం ద్వారా, మీరు అందరికీ మరింత సమ్మిళిత మరియు వినియోగదారు-స్నేహపూర్వక వెబ్ అనుభవాన్ని సృష్టించవచ్చు.

మరిన్ని వనరులు

• WAI-ARIA ఆథరింగ్ ప్రాక్టీసెస్ గైడ్ (APG) - క్యాలెండర్
• వెబ్ కంటెంట్ యాక్సెసిబిలిటీ గైడ్‌లైన్స్ (WCAG) 2.1
• డెక్ యూనివర్సిటీ